<template>
  <div class="box">
      <header class="header">
        <ul>
          <li class="left">
            <van-icon name="arrow-left" color="#333" size="20" @click="$router.back()"/>
          </li>
          <li class="center">
            <div class="search" @click="$router.push('/search')">搜索商品</div>
          </li>
          <li class="right">
          </li>
        </ul>
      </header>
      <section class="content">
        <van-sidebar v-model="activeKey" @change="onChange">
          <van-sidebar-item :title="item" v-for="item of categoryList" :key="item.proid" @click="selectItem(item)"/>
        </van-sidebar>
        <div class="contentRight">
          <van-grid :column-num="3" icon-size="42">
            <van-grid-item :icon="item.logo" :text="item.brand" v-for="(item, index) of brandList" :key="index" @click="tolist(item.brand)"/>
          </van-grid>
        </div>
      </section>
    </div>
</template>

<script>
import Vue from 'vue'
import { Icon, Sidebar, SidebarItem, Grid, GridItem } from 'vant'
import { getCategory, getCategoryBrand } from '@/api'

Vue.use(Icon)
Vue.use(Sidebar)
Vue.use(SidebarItem)
Vue.use(Grid)
Vue.use(GridItem)

export default {
  data () {
    return {
      activeKey: 0,
      categoryList: [],
      brandList: []
    }
  },
  mounted () {
    this.getCategory()
  },
  methods: {
    onChange (val) {
      // console.log(val)
      this.activeKey = val
    },
    getCategory () {
      getCategory().then(res => {
        this.categoryList = res.data.data
        this.selectItem(this.categoryList[0])
      })
    },
    selectItem (item) {
      // console.log(item)
      getCategoryBrand({
        category: item
      }).then(res => {
        this.brandList = res.data.data
      })
    },
    tolist (brand) {
      this.$router.push(`/classifyList?category=${this.categoryList[this.activeKey]}&brand=${brand}`)
    }
  }
}
</script>

<style lang="scss" scoped>
.header {
  background: #fff;
  border-bottom: 0.01rem solid #ddd;
  ul {
    height: 100%;
    display: flex;
    li {
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      &:nth-child(1), &:nth-child(3) {
        color: #fff;
      }
      &:nth-child(2) {
        flex: 1;
        .search {
          width: 80%;
          height: 0.3rem;
          background: #efefef;
          color: #666;
          padding-left: 12px;
          line-height: 0.3rem;
          border-radius: 20px;
        }
      }
    }
  }
}
.content {
  display: flex;
  .contentRight {
    flex: 1;
  }
}
</style>
